<template>
  <div>
    <!-- <Header :title="'返回'" :hasBackPath="true" @headerBack="headerBack"></Header> -->
    <a-card :bordered="false">
      <div class="edit-font">
        {{ materialInfo.currentNoteName }}
        <div class="creatorStatus noConfirm" v-if="materialInfo.status == 100">待创建者确认</div>
        <div class="creatorStatus hasConfirm" v-if="materialInfo.status == 101">已确认</div>
      </div>
      <a-descriptions :column="4">
        <a-descriptions-item label="素材ID"> {{ materialInfo.themeId }} </a-descriptions-item>
        <!-- <a-descriptions-item label="素材类型" v-if="materialInfo.guideRole == '-1'"> 普通导购 </a-descriptions-item> -->
        <a-descriptions-item label="素材类型"> {{ materialInfo.classifyName }} </a-descriptions-item>
        <a-descriptions-item label="提审时间"> {{ materialInfo.createTime }} </a-descriptions-item>
        <a-descriptions-item label="更新时间"> {{ materialInfo.updateTime }} </a-descriptions-item>
        <a-descriptions-item label="创建人">
          <span>{{ materialInfo.creatorName }}</span>
          <span style="margin-left: 3px; margin-right: 14px">{{ materialInfo.workerId }}</span>
          <span>{{ materialInfo.storeName }}</span>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card :bordered="false" style="margin-top: 24px; min-height: 45vh">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="素材内容">
          <a-form-model :label-col="{ span: 2 }" :wrapper-col="{ span: 18 }">
            <a-form-model-item label="发布方" style="margin-bottom: 12px">
              <img v-if="materialInfo.publisherAvatar" :src="materialInfo.publisherAvatar" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px" alt="" />
              {{ materialInfo.publisherName }}
            </a-form-model-item>
            <a-form-model-item label="搭配主题" style="margin-bottom: 12px"> {{ materialInfo.themeName }} </a-form-model-item>
            <a-form-model-item label="简介" style="margin-bottom: 12px">
              {{ materialInfo.themeRemark }}
            </a-form-model-item>
            <a-form-model-item label="适用品牌" style="margin-bottom: 12px"> {{ materialInfo.themeBrand }} </a-form-model-item>
            <a-form-model-item label="投放门店" style="margin-bottom: 12px">
              <span v-if="materialInfo.storeType == 1">条件筛选</span>
              <span v-if="materialInfo.storeType == 2">{{ materialInfo.storePkgId | filterStatus(storeList) }}门店包</span>
            </a-form-model-item>
            <a-form-model-item label="投放渠道" style="margin-bottom: 12px" v-if="materialInfo.storeType == 1"> {{ materialInfo.putChannel }} </a-form-model-item>
            <a-form-model-item label="不可见门店类型" style="margin-bottom: 12px" v-if="materialInfo.storeType == 1">
              {{ materialInfo.putStoreType ? materialInfo.putStoreType : '无' }}
            </a-form-model-item>
            <a-form-model-item label="是否生成海报" style="margin-bottom: 12px">
              <template v-if="materialInfo.shareState != 3">
                {{ materialInfo.shareState == 1 ? '是' : '否' }}
              </template>
              <template v-else>
                <div @click="authVisible = true" class="posterauth">{{ copyrightName }}</div>
              </template>
            </a-form-model-item>
            <a-form-model-item label="是否生成单品海报" style="margin-bottom: 12px" v-if="materialInfo.shareState == 0">
              <template>
                {{ materialInfo.createProductPoster == 1 ? '是' : '否' }}
              </template>
            </a-form-model-item>
            <div>
              <a-form-model-item label="素材有效期" style="margin-bottom: 12px" v-if="materialInfo.putAwayEndTime == '9999-12-30 23:59:59'">
                <span v-if="materialInfo.putAwayTime"> {{ materialInfo.putAwayTime }} — 永久有效 </span>
              </a-form-model-item>
              <a-form-model-item label="素材有效期" style="margin-bottom: 12px" v-else>
                <span v-if="materialInfo.putAwayTime"> {{ materialInfo.putAwayTime }} — {{ materialInfo.putAwayEndTime }} </span>
              </a-form-model-item>
            </div>

            <a-modal v-model="authVisible" @ok="authVisible = false" centered :width="700">
              <div class="authDetail">
                <div style="display: flex">
                  <p class="authItem"><span>*</span><span>版权名称</span></p>
                  <p>
                    <span>{{ copyrightDetail.name }}</span>
                  </p>
                </div>
                <div style="display: flex">
                  <p class="authItem"><span>*</span><span>有效期限</span></p>
                  <p>
                    <span>{{ copyrightDetail.expireType == 1 ? '永久有效' : copyrightDetail.expireDate }}</span>
                  </p>
                </div>
                <div style="display: flex">
                  <p class="authItem"><span>*</span><span>是否生成海报</span></p>
                  <p>
                    <span>{{ copyrightDetail.isCreatePoster == 'Y' ? '是' : '否' }}</span>
                  </p>
                </div>
                <div style="display: flex" v-if="copyrightDetail.isCreatePoster == 'N'">
                  <p class="authItem"><span>*</span><span>是否生成单品海报</span></p>
                  <p>
                    <span>{{ copyrightDetail.createProductPoster == 'Y' ? '是' : '否' }}</span>
                  </p>
                </div>
                <div style="display: flex">
                  <p class="authItem"><span></span><span>备注</span></p>
                  <p>
                    <span>{{ copyrightDetail.remark }}</span>
                  </p>
                </div>
              </div>
            </a-modal>
            <a-form-model-item label="视频/图片" style="margin-bottom: 12px">
              <div style="display: flex">
                <video :src="themeVideo.videoUrl" controls muted loop class="like-theme" v-if="themeVideo && themeVideo.videoUrl" :poster="themeVideo.coverUrl"></video>
                <!-- <div class="like-theme" v-for="(item, index) in customerStyleImgs" :key="index">
                  <img :src="item.value" class="imgs" @click="bigImg(index, customerStyleImgs, 'styleList')" />
                  <div class="icon-sort">{{ index + 1 }}</div>
                </div> -->

                <viewer :images="customerStyleImgs" style="display: flex">
                  <div class="like-theme" v-for="(item, index) in customerStyleImgs" :key="index">
                    <img class="imgs" :src="item.value" :key="index" height="300" alt="" />
                    <div class="icon-sort">{{ index + 1 }}</div>
                  </div>
                </viewer>

                <!-- <div class="like-theme" v-for="(item, index) in customerStyleImgs" :key="index">
                  <viewer :images="customerStyleImgs">
                    <img class="imgs" :src="item.value" :key="index" height="300" alt="" />
                    <div class="icon-sort">{{ index + 1 }}</div>
                  </viewer>
                </div> -->
              </div>
            </a-form-model-item>
            <a-form-model-item label="附件" style="margin-bottom: 12px" v-if="files && files.length > 0">
              <div style="width: 240px">
                <JImageUpload
                  :uploadParams="getUploadParams()"
                  :dowloadTextByName="true"
                  :number="999"
                  accept=".xls,.xlsx"
                  :isMultiple="true"
                  :fileSize="10"
                  :listType="'text'"
                  v-model="files"
                  :disabled="true"
                ></JImageUpload>
              </div>
            </a-form-model-item>
          </a-form-model>
        </a-tab-pane>
        <a-tab-pane :key="2">
          <span slot="tab">
            关联商品 <span class="num">({{ productList.length }})</span>
          </span>
          <div class="ant-pro-pages-list-projects-cardList">
            <a-list :loading="loading" :data-source="productList" :grid="{ gutter: 0 }">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card class="ant-pro-pages-list-projects-card" hoverable>
                  <div style="border-bottom: 1px solid #ccc; height: 200px">
                    <img slot="cover" v-lazy="item.productImage ? item.productImage : 'https://img.bzhz.jnbygroup.com/cloth.png'" style="width: 200px; height: 200px" />
                  </div>
                  <div class="edit-foot">
                    <p>{{ item.productName }}</p>
                    <p>{{ item.productNo }}</p>
                    <p>¥{{ item.productPrice }}</p>
                  </div>
                </a-card>
              </a-list-item>
            </a-list>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card :bordered="false" style="margin-top: 24px; min-height: 65vh">
      <div style="margin-left: 24px; font-size: 14px; font-weight: 700">审核记录</div>
      <a-divider />
      <div style="overflow-y: auto; height: 700px">
        <div v-for="(item, index) in themeApprovalLogVos" :key="index" style="padding: 12px 36px">
          <div style="display: flex; padding-left: 12px">
            <div class="written" style="min-width: 150px">{{ item.approvalNodeName }}</div>
            <div>
              <div style="display: flex">
                <div class="written">
                  编号：<router-link :to="`/pos+/material/components/publicDetail/${item.submissionId}/${approvalType}?blank=blank`" target="_blank">{{ item.submissionCode }}</router-link>
                </div>
                <div class="written current">操作人：{{ item.approvalUser }}</div>
                <div class="written">操作时间：{{ item.createTime }}</div>
              </div>
              <div v-if="item.reason">
                <template v-if="item.approvalStatus == 3">
                  <span v-if="item.approvalNode == 10 || item.approvalNode == 11" class="written"> 说明：</span>
                </template>
                <template v-else>
                  <span v-if="item.approvalStatus == 4" class="written"> 驳回理由：</span>
                  <span v-else-if="item.approvalStatus == 100" class="written"> 待确认信息：</span>
                  <span v-else-if="item.approvalStatus == 101" class="written"> 回复信息：</span>
                </template>
                {{ item.reason }}
              </div>
              <div v-if="item.submissionRemark">
                <span class="written"> 说明：</span>
                {{ item.submissionRemark }}
              </div>
            </div>
          </div>
          <a-divider />
        </div>
      </div>
    </a-card>
    <div class="footer-box" v-if="condition && materialInfo.operator == 'approval'">
      <a-button style="margin-right: 10px" @click="checkNext">下一篇素材</a-button>
      <a-button style="margin-right: 10px" @click="ShowVisibleConfirm">{{ materialInfo.status == 100 ? '修改确认信息' : '创建者确认' }}</a-button>
      <a-button style="margin-right: 10px" @click="showReject">驳回</a-button>
      <a-button type="primary" @click="() => (examineVisible = true)">审核通过</a-button>
    </div>
    <!-- 驳回 -->
    <a-drawer
      title="请输入驳回理由"
      :maskClosable="true"
      :width="700"
      placement="right"
      :closable="true"
      @close="visible = false"
      :visible="visible"
      style="height: 100%; overflow: auto; padding-bottom: 80px"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
        <a-form-item label="驳回理由" required>
          <a-textarea v-model="reason" placeholder="最多120字" :maxLength="120" style="height: 200px" />
        </a-form-item>
      </a-form>
      <div class="replay" @click="handleReplay(item)" v-for="(item, index) in replayList" :key="index">{{ item.content }}</div>
      <div class="drawer-btn">
        <a-button style="margin-right: 8px" @click="visible = false">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </div>
    </a-drawer>
    <!-- 待确认信息 -->
    <a-drawer
      title="请输入待确认信息"
      :maskClosable="true"
      :width="700"
      placement="right"
      :closable="true"
      @close="visibleConfirm = false"
      :visible="visibleConfirm"
      style="height: 100%; overflow: auto; padding-bottom: 80px"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
        <a-form-item label="待确认信息" required>
          <a-textarea v-model="confirmText" placeholder="最多120字" :maxLength="120" style="height: 200px" />
        </a-form-item>
      </a-form>
      <div class="drawer-btn">
        <a-button style="margin-right: 8px" @click="visibleConfirm = false">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确定</a-button>
      </div>
    </a-drawer>
    <!-- <a-modal v-model="visible" title="请输入驳回理由" @ok="handleOk" centered>
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
        <a-form-item label="驳回理由" required>
          <a-textarea v-model="reason" placeholder="最多120字" :maxLength="120" style="height: 100px" />
        </a-form-item>
      </a-form>
    </a-modal> -->
    <!-- 审核通过 -->
    <a-modal v-model="examineVisible" @ok="examineOk" centered :width="400" :closable="false">
      <div class="edit-examine">
        <a-icon type="exclamation-circle" theme="filled" />
        <div class="examine">是否确认通过审核？</div>
      </div>
    </a-modal>
    <!-- <BigImg :visibleImgs="visibleImgs" :imgList="imgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg> -->
  </div>
</template>
<script>
import { examine, conditionDetail, verified } from '@/api/pos'
import Header from '@/views/box/components/layouts/Header'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { storeVoucher } from '@/api/pos/match'
import { copyRightDetail, rejectReason } from '@/api/pos/authority'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'
import moment from 'moment'
// 图片预览插件
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  inline: false, //启用inline模式
  button: true, //显示右上角关闭按钮
  navbar: true, //显示缩略图导航
  title: false, //显示当前图片的标题
  toolbar: true, //显示工具栏
  tooltip: true, //显示缩略百分比
  movable: true, //图片是否可移动
  zoomable: true, //图片是否可缩放
  rotatable: false, //图片是否可旋转
  scalable: false, //图片是否可反转
  transition: true, //使用css3过度
  fullscreen: false, //播放时是否全屏
  keyboard: true //
})
export default {
  components: {
    // BigImg,
    Header,
    JImageUpload
  },
  data() {
    return {
      id: this.$route.params.id,
      noteId: this.$route.params.noteId,
      visible: false,
      visibleConfirm: false,
      examineVisible: false,
      visibleImgs: false,
      goToIndex: 0,
      imgList: [],
      reason: '',
      confirmText: '', // 待确认信息
      userInfo: Vue.ls.get(USER_INFO),
      guideName: {
        0: '导购',
        1: '总部经理',
        2: '大区经理',
        3: 'KOU',
        4: '集团'
      },
      materialInfo: {
        themeId: '',
        currentNoteName: '',
        createTime: '',
        updateTime: '',
        guideName: '',
        guideId: '',
        storeName: '',
        themeName: '',
        themeBrand: '',
        themeRemark: '',
        id: '',
        workerId: '',
        status: ''
      },
      nextId: null,
      files: [],
      customerStyleImgs: [],
      productList: [],
      themeApprovalLogVos: [],
      loading: false,
      themeVideo: {},
      authVisible: false, // 海报版权
      replayList: [],
      copyrightDetail: '', // 版权信息
      copyrightName: '', // 版权名称
      approvalType: '',
      storeList: []
    }
  },
  computed: {
    condition() {
      const condition = [3, 4, 5]
      if (condition.includes(this.materialInfo.status)) {
        return false
      } else {
        return true
      }
    }
  },
  filters: {
    filterStatus(v, storeList) {
      if (storeList.length > 0) {
        let result = storeList.filter(e => e.packageId == v)
        if (result.length > 0) {
          return result[0].packageName
        } else {
          return v
        }
      } else {
        return v
      }
    }
  },
  async mounted() {
    await this.getStore()
    await this._conditionDetail()
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    // 上传图片
    getUploadParams() {
      return {
        ...globalData.uploadParams
      }
    },
    getStore() {
      const params = {
        isStorePackage: true
      }
      storeVoucher(params).then(res => {
        if (res.code == 200) {
          this.storeList = res.data
          console.log(res.data, 'res.data')
        } else {
          // this.$message.warning(res.msg)
        }
      })
    },
    // filterStatus(v) {
    //   if (this.storeList.length > 0) {
    //     let result = this.storeList.filter(e => e.packageId == v)
    //     if (result.length > 0) {
    //       return result[0].packageName
    //     } else {
    //       return v
    //     }
    //   } else {
    //     return v
    //   }
    // },
    ShowVisibleConfirm() {
      const that = this
      this.visibleConfirm = true
      if (this.materialInfo.status == 100) {
        that.confirmText = this.themeApprovalLogVos[0].reason
      }
    },
    // 创建者确认——提交确认信息
    handleConfirm() {
      console.log('----', this.confirmText)
      if (!this.confirmText) {
        this.$message.warning('请输入待确认信息')
        return
      }
      let data = {
        currentNodeId: this.materialInfo.currentNote, // 当前审核节点ID
        workNo: this.userInfo.workNo, // 审核人工号
        status: 100, // 3-审核通过 4-驳回
        submissionLogId: this.id, //投稿ID
        remark: this.confirmText
      }
      examine(data).then(res => {
        this.confirmText = ''
        this.visibleConfirm = false
        if (res.code == 200) {
          if (this.materialInfo.status == 100) {
            this.$message.success('修改成功')
            this._conditionDetail()
          } else {
            this.$message.success('编辑成功')
            this.checkNext()
          }
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 驳回
    showReject() {
      this.visible = true
      this.getRejectReason()
    },
    // 审核驳回理由
    async getRejectReason() {
      const res = await rejectReason()
      console.log(res)
      if (res.code == 200) {
        this.replayList = res.data
      }
    },
    // 版权信息
    async getCopyDetail() {
      const params = {
        id: this.copyrightId
      }
      const res = await copyRightDetail(params)
      if (res.code == 200) {
        this.copyrightDetail = res.data
        this.copyrightName = res.data.name
      }
    },
    // 点击添加快捷回复
    handleReplay(item) {
      let all = this.reason.length + item.content.substring(2).length
      if (this.reason.length < 120 && all < 120) {
        this.reason = this.reason + item.content.substring(2)
      } else {
        this.$toast('驳回理由不能超过120字')
      }
    },
    headerBack() {
      this.$router.back()
    },
    // 查看大图
    bigImg(index, list, type) {
      if (type === 'styleList') {
        this.imgList = list.map(item => {
          if (item.img) {
            item.value = item.img
          }
          return item.value
        })
      } else if (type === 'photo') {
        this.imgList = [list]
      }
      this.goToIndex = index
      setTimeout(() => {
        this.visibleImgs = true
      }, 100)
    },
    // 关闭大图
    closeBig(value) {
      this.visibleImgs = value
      setTimeout(() => {
        this.imgList = []
      }, 200)
    },
    handleOk() {
      console.log(this.noteId)
      console.log(this.reason)
      if (!this.reason) {
        this.$message.warning('请输入驳回理由')
        return
      }

      let data = {
        status: 4, // 3-审核通过 4-驳回
        submissionLogId: this.id, //投稿ID
        currentNodeId: this.materialInfo.currentNote, // 当前审核节点ID
        workNo: this.userInfo.workNo, // 审核人工号
        remark: this.reason //驳回理由
      }
      examine(data).then(res => {
        if (res.code == 200) {
          this.$message.success('驳回成功')
          let params = {
            submissionId: this.id,
            type: 2
          }
          verified(params).then(res => {
            console.log(res)
          })
          // switch (this.noteId) {
          //   case '6':
          //     this.$router.push('/pos+/material/business/index')
          //     break
          //   case '7':
          //     this.$router.push('/pos+/material/brand/index')
          //     break
          //   case '8':
          //     this.$router.push('/pos+/material/relation/index')
          //     break
          //   case '9':
          //     this.$router.push('/pos+/material/legal/index')
          //     break
          // }

          this.visible = false
          this.reason = ''
          this.checkNext()
        } else {
          this.$message.error(res.data.msg)
          this.visible = false
          this.reason = ''
        }
      })
    },
    // 下一篇
    checkNext() {
      if (!this.nextSubmissionLogId) {
        this.$message.success('当前已是最后一条待审核素材')
        switch (this.noteId) {
          case '6':
            this.$router.push('/pos+/material/business/index')
            break
          case '7':
            this.$router.push('/pos+/material/brand/index')
            break
          case '8':
            this.$router.push('/pos+/material/relation/index')
            break
          case '9':
            this.$router.push('/pos+/material/legal/index')
            break
        }
        return
      }
      this.$router.push(`/pos+/material/components/publicDetail/${this.nextSubmissionLogId}/${this.approvalType}?blank=blank`)
      location.reload()
    },
    // 详情
    _conditionDetail() {
      let params = {
        submissionLogId: this.id,
        noteId: this.noteId,
        loginWorkNo: this.$store.getters.userInfo.workNo
      }
      conditionDetail(params).then(res => {
        if (res.code == 200) {
          this.nextSubmissionLogId = res.data.nextSubmissionLogId
          // 版权id
          this.copyrightId = res.data.copyrightId
          if (res.data.copyrightId) {
            this.getCopyDetail()
          }
          // 三期
          this.materialInfo = res.data
          if (res.data.putAwayTime) {
            this.materialInfo.putAwayTime = moment(res.data.putAwayTime).format('YYYY-MM-DD HH:mm')
          }
          if (this.materialInfo.putAwayEndTime) {
            if (this.materialInfo.putAwayEndTime != '9999-12-30 23:59:59') {
              this.materialInfo.putAwayEndTime = moment(res.data.putAwayEndTime).format('YYYY-MM-DD HH:mm')
            }
          }

          this.approvalType = this.noteId
          if (res.data.files[0] == '') {
            res.data.files = []
          }
          this.files = res.data.files.map(item => {
            let info = {
              url: item.fileUrl,
              name: item.fileName
            }
            return info
          })

          this.nextId = res.data.nextId
          if (res.data.themeImage) {
            this.customerStyleImgs = res.data.themeImage.split(',')
          }
          if (res.data.themeVideo) {
            this.themeVideo = JSON.parse(res.data.themeVideo)
          }

          if (this.customerStyleImgs && this.customerStyleImgs.length > 0) {
            this.customerStyleImgs = this.customerStyleImgs.map(item => {
              return { value: item }
            })
          }

          this.productList = res.data.themeProductVos
          this.themeApprovalLogVos = res.data.themeApprovalLogVos
        }
      })
    },
    //  审核按钮
    examineOk() {
      let data = {
        status: 3, // 3-审核通过 4-驳回
        submissionLogId: this.id, //投稿ID
        currentNodeId: this.materialInfo.currentNote, // 当前审核节点ID
        workNo: this.userInfo.workNo // 审核人工号
      }
      examine(data).then(res => {
        if (res.code == 200) {
          this.$message.success('审核成功')
          let params = {
            submissionId: this.id,
            type: 1
          }
          if (this.nextId == 0) {
            verified(params).then(res => {
              console.log(res)
            })
          }
          if (!this.nextSubmissionLogId) {
            this.$message.success('当前已是最后一条待审核素材')
            switch (this.noteId) {
              case '6':
                this.$router.push('/pos+/material/business/index')
                break
              case '7':
                this.$router.push('/pos+/material/brand/index')
                break
              case '8':
                this.$router.push('/pos+/material/relation/index')
                break
              case '9':
                this.$router.push('/pos+/material/legal/index')
                break
            }
            return
          }
          this.$router.push(`/pos+/material/components/publicDetail/${this.nextSubmissionLogId}/${this.approvalType}?blank=blank`)
          location.reload()

          this.examineVisible = false
        } else {
          this.$message.error(res.msg)
          this.examineVisible = false
        }
      })
    }
  }
}
</script>
<style scoped lang="less" >
/deep/ .viewer-canvas {
  background-color: #fff;
  width: 70vw;
  height: 70vh;
  margin: 100px auto;
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}
.icon-sort {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.edit-examine {
  display: flex;
  align-items: center;
}
.edit-font {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 24px;
  color: #000000d9;
  display: flex;
  align-items: center;
}
.creatorStatus {
  font-weight: 650;
  font-style: normal;
  font-size: 12px;
  margin-left: 50px;
}
.noConfirm {
  color: rgba(245, 154, 35, 0.847058823529412);
}
.hasConfirm {
  color: rgba(112, 182, 3, 0.847058823529412);
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 12px;
  height: 100%;
  min-height: 200px;
  overflow-y: auto;
  /deep/ .ant-row {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 200px);
    // grid-row-gap: 16px;
    grid-column-gap: 8px;
  }
  /deep/ .ant-row::before {
    content: '';
    width: 0;
    display: none;
  }

  /deep/ .ant-list-item {
    margin-bottom: 24px;
    .ant-card-hoverable {
      cursor: default;
    }
  }
  /deep/ .ant-card {
    width: 200px;
    position: relative;
    overflow: hidden;
  }
  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }
  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }
  /deep/ .ant-card-cover {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #fff;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      border-radius: 4px;
    }
  }

  .cardItemContent {
    padding: 0px 0px 6px;
    line-height: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    > p {
      color: #cdcdcd;
      font-size: 12px;
      line-height: 20px;
      margin-bottom: 0;
    }
    > h3 {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 0;
    }
    .price {
      display: flex;
      align-items: center;
    }
    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
    /deep/.ant-skeleton-title {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  /deep/ .ant-list-pagination {
    margin-top: 0;
  }
  /deep/ .ant-card-body {
    padding: 0px !important;
  }
}
.edit-foot {
  padding: 12px;
  p {
    color: #8c8c8c;
    margin-bottom: 5px;
  }
  p:first-child {
    color: #262626;
    font-size: 16px;
  }
  p:last-child {
    color: #cdcdcd;
    font-size: 12px;
  }
}
.footer-box {
  padding: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #8c8c8c;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  background: #fff;
  display: flex;
  justify-content: flex-end;
}
.examine {
  font-size: 16px;
  padding: 24px;
  font-weight: 600;
}
/deep/.edit-examine .anticon {
  font-size: 22px;
  color: #faad14;
}
.like-theme {
  width: 140px;
  height: 140px;
  cursor: pointer;
  border: 1px dashed #cdcdcd;
  margin-right: 10px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border-radius: 4px;
  }
}
.written {
  font-weight: 600;
  margin-bottom: 24px;
  color: #000000d9;
}
.current {
  margin-left: 100px;
  margin-right: 100px;
}
/deep/ .ant-divider-horizontal {
  margin: 12px 0;
}
.authDetail {
  padding: 30px;
}
.authItem {
  width: 120px;
  text-align: right;
  margin-right: 24px;
}
.authItem > span:nth-child(1) {
  color: rgba(217, 0, 27, 0.847058823529412);
}
.posterauth {
  color: rgba(0, 0, 255, 0.647058823529412);
  text-decoration: underline;
}
.replay {
  margin-left: 120px;
  color: #02a7f0;
  line-height: 30px;
}
.drawer-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
/deep/ .ant-upload.ant-upload-disabled {
  display: none;
}
</style>